@mixin button() {
  @include standardTransition();

  background: $white;
  border-radius: $size-4;
  border: none;
  text-decoration: none;
  box-sizing: border-box;
  color: $mulberry !important;
  cursor: pointer;
}

@mixin buttonFull() {
  .buttonS,
  .buttonM,
  .buttonL,
  .buttonGhostS,
  .buttonGhostM,
  .buttonGhostL,
  .buttonDarkS,
  .buttonDarkM,
  .buttonDarkL {
    display: block;
    text-align: center;
    width: 100%;
  }
}

@mixin buttonHover() {
  &:hover,
  &:focus {
    opacity: 0.5;
  }
}

@mixin buttonXS() {
  font-size: $size-16;
  padding: $size-12;
}

@mixin buttonS() {
  @include setFontSize($size-18);
  @include setPadding($size-16, $size-16, $size-16, $size-16);
}

@mixin buttonM() {
  @include setFontSize($size-20);
  @include setPadding($size-18, $size-18, $size-18, $size-18);
}

@mixin buttonL() {
  @include setFontSize($size-22);
  @include setPadding($size-20, $size-20, $size-20, $size-20);

  font-weight: bold;
}

@mixin buttonGhost() {
  background: $white-10;
  color: $white !important;
}

@mixin buttonDark() {
  background: $mulberry;
  color: $white !important;
}

.buttonGhost {
  &XS {
    @include button();
    @include buttonGhost();
    @include buttonXS();
    @include buttonHover();
  }

  &S {
    @include button();
    @include buttonGhost();
    @include buttonS();
    @include buttonHover();
  }

  &M {
    @include button();
    @include buttonGhost();
    @include buttonM();
    @include buttonHover();
  }

  &L {
    @include button();
    @include buttonGhost();
    @include buttonL();
    @include buttonHover();
  }
}

.button {
  &XS {
    @include button();
    @include buttonXS();
    @include buttonHover();
  }

  &S {
    @include button();
    @include buttonS();
    @include buttonHover();
  }

  &M {
    @include button();
    @include buttonM();
    @include buttonHover();
  }

  &L {
    @include button();
    @include buttonL();
    @include buttonHover();
  }
}

.buttonDark {
  &XS {
    @include button();
    @include buttonDark();
    @include buttonXS();
    @include buttonHover();
  }

  &S {
    @include button();
    @include buttonDark();
    @include buttonS();
    @include buttonHover();
  }

  &M {
    @include button();
    @include buttonDark();
    @include buttonM();
    @include buttonHover();
  }

  &L {
    @include button();
    @include buttonDark();
    @include buttonL();
    @include buttonHover();
  }
}
